<template>
  <div class="Course animated fadeInUp">
    <projectlist
      :title="'课程中心'"
      :type="1"
      :projectlist="dataList.PopularCourse"
      :subtitle="'Course center'"
    ></projectlist>
    <div class="paging" v-if="dataList.PopularCourse.length">
      <el-pagination
        :pager-count="5"
        background
        small
        layout="prev, pager, next"
        :total="dataList.total"
        :current-page="dataList.page"
        @current-change="changesize"
      />
    </div>
  </div>
</template>

<script setup>
  import { reactive, onBeforeMount } from "vue";
  import projectlist from "@/components/projectList.vue";
  import { getCourse } from "@/api/home.js";
  const dataList = reactive({
    page: 0,
    tabid: 0,
    total: 10,
    PopularCourse: [],
  });
  const changesize = (value) => {
    console.log("changesize:" + value);
    dataList.page = value - 1;
    getPopularCourse();
  };
  onBeforeMount(() => {
    getPopularCourse();
  });
  const getPopularCourse = () => {
    var data = {
      projectId: "dxhzalctqitlv9umq3wtdg",
      coursetype: 1,
      page: dataList.page + 1,
      hot: true,
      pagesize: 8,
    };

    getCourse(data).then((res) => {
      console.log(JSON.parse(res.list).obj);
      dataList.PopularCourse = JSON.parse(res.list).obj;
      dataList.total = res.totalCount;
      dataList.page += 1;
      // pageCount
      // totalCount
    });
  };
</script>

<style lang="scss" scoped>
  $width: 774px;

  @media screen and (min-width: 1200px) {
    .Course {
      width: $width;
      margin: 26px auto 0;
    }
    .paging {
      width: 100%;
      margin-bottom: 50px;
      display: flex;
      justify-content: center;
      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .Course {
      width: 95vw;
      margin: 0 auto;
      margin-top: 5vw;
      min-height: 61vh;
    }
    .paging {
      width: 95vw;
      margin-bottom: 6vw;
      display: flex;
      justify-content: center;
      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }
  }
</style>
